import React, { PureComponent } from "react"

export class App extends PureComponent {
    constructor() {
        super()
        this.state = {
            username: "",
            password: "",
        }
    }
    handleSubmitClick(e) {
        // 1.阻止默认的行为
        e.preventDefault()
        // 2.获取到所有表单数据，对数据进行组件
        console.log(this.state)
        // 3.以网络请求的方式，将数据传递给服务器
    }
    handleChangeInput(e) {
        this.setState({
            // 计算属性名 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer#
            [e.target.name]: e.target.value,
        })
    }
    /*  handlePassword(e) {
        this.setState({
            password: e.target.value,
        })
    } */
    componentDidUpdate() {
        const { username, password } = this.state
        console.log(username, password)
    }
    render() {
        return (
            <div>
                <form onSubmit={(e) => this.handleSubmitClick(e)}>
                    用户名：
                    <input
                        type="text"
                        name="username"
                        onChange={(e) => this.handleChangeInput(e)}
                        value={this.state.username}
                    />
                    密码：
                    <input
                        type="password"
                        name="password"
                        onChange={(e) => this.handleChangeInput(e)}
                        value={this.state.password}
                    />
                    <button type="submit">注册</button>
                </form>
            </div>
        )
    }
}

export default App
